<template>
  <view>
    <view class="content">
      <view>
        <swiper
          :indicator-dots="true"
          :autoplay="true"
          :interval="3000"
          :duration="500"
        >
          <swiper-item
            v-for="(item, index) in chargeData.pic
              ? chargeData.pic.split('|')
              : []"
            :key="index"
          >
            <image style="width: 100%" :src="item" mode="aspectFill"></image>
          </swiper-item>
        </swiper>
      </view>
      <view class="card">
        <view class="card-title">xxxx{{ chargeData.name }}</view>
        <view class="notes">
          {{
            chargeData.lable
              ? chargeData.lable.content.replaceAll(",", " | ")
              : " "
          }}
        </view>
        <view class="open-time">{{ chargeData.openTime }}</view>
        <!-- <view class="address">
					<view class="address-info">
						<view class="address-text">{{ chargeData.address }}</view>
						<view class="distance-text">距离{{ distance }}米</view>
					</view>
					<view class="icon-container">
						<image class="icon" src="@/static/img/daohang.png"></image>
						<view class="distance-km">{{ distance }}km</view>
					</view>
				</view> -->
      </view>
      <view class="statistics">
        <view class="super" @click="openChargeDetails('1')">
          <image src="@/static/img/chao.png" class="chong" />
          <!-- <text class="front">超充</text> -->
          <text class="centre">空闲 {{ chargeData.unused }}</text>
          <text class="after">/{{ chargeData.canUse }}</text>
        </view>
        <view class="fast" @click="openChargeDetails('2')">
          <image src="@/static/img/kuai.png" class="chong" />
          <!-- <text class="front">快充</text> -->
          <text class="centre">空闲 {{ chargeData.unusedSlowly }}</text>
          <text class="after">/{{ chargeData.canUseSlowly }}</text>
        </view>
      </view>
      <view class="guanggao" @click="goToVip" v-if="!isVip">
        <image src="@/static/img/huiyuan.png"></image>
      </view>
      <view class="card">
        <view class="charge-price">
          <view class="front cdf">充电费</view>
          <view class="after jiage" @click="opnePriceRemarks">
            <text class="jiagesm">价格说明</text>
            <image src="@/static/img/wt.png"></image>
          </view>
        </view>
        <view>
          <view class="list-item" style="background-color: #f0f8ff">
            <text class="ul1">充电时段</text>
            <text class="ul2">原价格(元/度)</text>
            <text class="ul3">会员价(元/度)</text>
          </view>
          <scroll-view style="height: 60px" @scrolltolower="loadMore">
            <view
              v-for="item in chargeData.atRechargeStationPriceList"
              :key="item.times"
              class="list-item"
              v-if="item.current == 1"
            >
              <view class="ul1 chontime"
                >{{ item.startTime.slice(0, 5) }} ~
                {{ item.endTime.slice(0, 5) }}</view
              >

              <view class="ul2 left-label-font">{{
                (
                  Number(item.electricCharge) + Number(item.serviceCharge)
                ).toFixed(2)
              }}</view>
              <view class="ul3 right-label-font" style="color: #ff7023">
                {{
                  (
                    Number(item.electricCharge) +
                    Number(item.serviceCharge) -
                    0.03
                  ).toFixed(2)
                }}
              </view>
            </view>
          </scroll-view>
          <view
            style="display: flex; justify-content: center; font-size: 26rpx"
            @click="openAllTimes()"
            >全部时段 ></view
          >
          <view
            v-if="chargeData.vipSave"
            style="color: #ff7023; font-size: 12px; margin-top: 5px"
          >
            会员本单预计省{{ chargeData.vipSave }}元
          </view>
        </view>
      </view>

      <view class="card">
        <view class="charge-price">
          <view class="front cdf">停车费</view>
          <view class="after jiage" @click="openParkingDetails">
            <text class="jiagesm">详情</text>
            <image src="@/static/img/wt.png"></image>
          </view>
        </view>
        <view class="parking-info">
          <view class="list-item">
            <text class="rule" style="color: #ff7023; font-size: 26rpx"
              >停车场收费</text
            >
          </view>
          <view class="list-item">
            <text class="rule-detail" style="color: #ff7023; font-size: 26rpx"
              >本场站不支持减免停车费</text
            >
          </view>
          <view class="list-item">
            <text class="supplement" style="font-size: 26rpx">补充说明</text>
            <text class="supplement-detail" style="font-size: 26rpx"
              >不支持停车减免，收费以场地标准为准</text
            >
          </view>
          <view class="list-item" v-if="carInfo.length == 0">
            <text class="no-car" style="font-size: 26rpx">暂无爱车</text>
            <text
              class="no-car-detail"
              style="color: #ff7023; cursor: pointer; font-size: 26rpx"
              @click="navTo('/pages/myself/cart?souce=0', { login: true })"
              >+ 添加车辆信息，获得更多优惠</text
            >
          </view>
          <view class="list-item" v-if="carInfo.length > 0">
            <text class="no-car" style="font-size: 26rpx">车牌号</text>
            <text
              class="no-car-detail"
              style="color: #ff7023; cursor: pointer; font-size: 26rpx"
              >{{ carInfo[0].license }}</text
            >
          </view>
        </view>
      </view>
      <view class="card">
        <view class="charge-price">
          <view class="front cdf">枪桩信息</view>
          <view class="after jiage" @click="openChargeDetails('0')">
            <text class="jiagesm">查看更多</text>
            <image src="@/static/img/wt.png"></image>
          </view>
        </view>
        <view
          class="list-item-info"
          v-for="(item, index) in deviceData"
          v-if="index < 4"
          :key="index"
        >
          <view>
            <text v-if="item.status == 0" class="stop">空闲</text>
            <text v-else class="use">占用</text>
          </view>
          <view class="gun-info">
            <view>
              <text style="width: 100xp">枪桩编号：</text>
              <text style="margin-left: 10px"
                >{{ item.num }}
                <!-- <image class="image" src="@/static/img/fz.png"></image
								><text style="font-size: 8px">复制</text> -->
              </text>
            </view>
            <view style="width: 100xp">
              <text style="width: 100xp">最大功率：</text>
              <text style="margin-left: 10px">{{ item.chargingSpeed }} kw</text>
            </view>
          </view>
        </view>
      </view>
      <!-- <view class="card">
				<view class="charge-price">
					<view class="front">服务设施</view>
				</view>
				<view class="service-facilities">
					<view class="ul">
						<view class="image">
							<image
								style="width: 20px; height: 20px"
								src="../../static/img/bld1.png"
							></image>
						</view>
						<view class="title">便利店</view>
					</view>
					<view class="ul">
						<view class="image"
							><image
								style="width: 20px; height: 20px"
								src="../../static/img/cy1.png"
							></image
						></view>
						<view class="title">简餐</view>
					</view>
					<view class="ul">
						<view class="image"
							><image
								style="width: 20px; height: 20px"
								src="../../static/img/wsj1.png"
							></image
						></view>
						<view class="title">卫生间</view>
					</view>
					<view class="ul">
						<view class="image"
							><image
								style="width: 20px; height: 20px"
								src="../../static/img/xxs1.png"
							></image
						></view>
						<view class="title">休息室</view>
					</view>
					<view class="ul">
						<view class="image"
							><image
								style="width: 20px; height: 20px"
								src="../../static/img/yp1.png"
							></image
						></view>
						<view class="title">雨棚</view>
					</view>
					<view class="ul">
						<view class="image"
							><image
								style="width: 20px; height: 20px"
								src="../../static/img/zs1.png"
							></image
						></view>
						<view class="title">有人值守</view>
					</view>
					<view class="ul">
						<view class="image"
							><image
								style="width: 20px; height: 20px"
								src="../../static/img/yp1.png"
							></image
						></view>
						<view class="title">雨棚</view>
					</view>
				</view>
			</view> -->
      <!-- <view class="card">
				<view style="display: flex; flex-direction: row; padding: 5px">
					<view style="font-size: 20px; font-weight: bold"
						>充电合作商家</view
					>
					<view
						style="
							margin-left: auto;
							color: #a3a3a3;
							display: flex;
							justify-content: center;
							align-items: center;
						"
						>></view>
				</view>
			</view>
			<view class="card">
				<view style="display: flex; flex-direction: row; padding: 5px">
					<view style="font-size: 20px; font-weight: bold">问题反馈</view>
					<view
						style="
							margin-left: auto;
							color: #a3a3a3;
							display: flex;
							justify-content: center;
							align-items: center;
						"
						>></view>
				</view>
			</view> -->
      <view class="footer">
        <view class="front">
          <view class="font">
            <text style="font-size: 8px">￥ </text>
            <text style="font-size: 16px; font-weight: bold">{{
              (
                Number(newTimes.electricCharge) + Number(newTimes.serviceCharge)
              ).toFixed(2)
            }}</text>
            <text style="font-size: 8px"> /度</text>
          </view>
          <view style="font-size: 10px">
            当前时段
            {{ newTimes.startTime ? newTimes.startTime.slice(0, 5) : "00:00" }}
            ~ {{ newTimes.endTime ? newTimes.endTime.slice(0, 5) : "00:00" }}
          </view>
        </view>
        <!-- <view class="after">
					<view class="custom-btn">扫码充电</view>
				</view> -->
      </view>
      <view>
        <uni-popup
          ref="popupRef"
          type="bottom"
          :mask-click="true"
          background-color="#F6F6F6"
        >
          <view class="chargeDetailsStyle">
            <view class="title">充电枪详情</view>
            <scroll-view scroll-x>
              <view class="scroll">
                <view
                  v-for="(item, index) in historicalTasksDict"
                  :key="item.key"
                  class="nav-item"
                  @click="changeCategory(index)"
                >
                  <view
                    ><text
                      style="display: flex; justify-content: center"
                      :class="{
                        active: index == currentIndex,
                        color: '#006ead',
                      }"
                      >{{ item.title }}</text
                    ></view
                  >
                  <view
                    style="
                      display: flex;
                      justify-content: center;
                      margin-top: 1px;
                    "
                    ><text
                      :class="{
                        active1: index == currentIndex,
                        color: '#006ead',
                      }"
                      >{{ item.num }}</text
                    ></view
                  >
                </view>
              </view>
            </scroll-view>
            <view>
              <scroll-view
                :scroll-top="scrollTop"
                scroll-y="true"
                class="scroll-Y"
              >
                <view
                  class="list-item-info"
                  v-for="(item, index) in deviceData"
                  v-if="currentIndex == item.type"
                  :key="index"
                >
                  <view>
                    <text v-if="item.status == 0" class="stop">空闲</text>
                    <text v-else class="use">占用</text>
                  </view>
                  <view class="gun-info">
                    <view>
                      <text style="width: 100xp">枪桩编号：</text>
                      <text style="margin-left: 10px"
                        >{{ item.num }}
                        <!-- <image class="image" src="@/static/img/fz.png"></image
												><text style="font-size: 8px">复制</text> -->
                      </text>
                    </view>
                    <view style="width: 100xp">
                      <text style="width: 100xp">最大功率：</text>
                      <text style="margin-left: 10px"
                        >{{ item.chargingSpeed }} kw</text
                      >
                    </view>
                  </view>
                </view>
              </scroll-view>
            </view>
          </view>
        </uni-popup>
        <uni-popup
          ref="popupAllTimes"
          type="bottom"
          :mask-click="true"
          background-color="#f4f4f4"
        >
          <view class="chargeDetailsStyle">
            <view class="title">价格详情</view>
            <view>
              <view class="list-item" style="background-color: aliceblue">
                <text class="ul1" style="width: 70px">充电时段</text>
                <text class="ul1" style="width: 34px">类型</text>
                <text class="ul2" style="width: 34px">价格(元/度)</text>
                <text class="ul3">=</text>
                <text class="ul4" style="width: 34px">电费(元/度)</text>
                <text class="ul5">+</text>
                <text class="ul6" style="width: 34px">服务费(元/度)</text>
              </view>
              <scroll-view
                scroll-y
                style="height: 45vh"
                @scrolltolower="loadMore"
              >
                <view
                  v-for="item in chargeData.atRechargeStationPriceList"
                  :key="item.times"
                  class="list-item"
                >
                  <text class="ul1">{{
                    item.startTime.slice(0, 5) + "~" + item.endTime.slice(0, 5)
                  }}</text>
                  <view style="width: 34px">
                    <text class="ul1">原价格</text>
                    <text class="ul1" style="color: #efad29">会员价 </text>
                  </view>

                  <view style="width: 34px">
                    <text class="ul2">
                      {{
                        (
                          Number(item.electricCharge) +
                          Number(item.serviceCharge)
                        ).toFixed(2)
                      }}
                    </text>
                    <text class="ul2" style="color: #efad29; font-weight: bold">
                      {{
                        (
                          Number(item.electricCharge) +
                          Number(item.serviceCharge) -
                          0.03
                        ).toFixed(2)
                      }}
                    </text>
                  </view>
                  <text class="ul3"> </text>

                  <view style="width: 34px">
                    <text class="ul4">
                      {{ Number(item.electricCharge).toFixed(2) }}
                    </text>
                    <text class="ul4" style="color: #efad29">
                      {{ Number(item.electricCharge - 0.03).toFixed(2) }}
                    </text>
                  </view>
                  <text class="ul5"> </text>

                  <view style="width: 34px">
                    <text class="ul6">
                      {{ Number(item.serviceCharge).toFixed(2) }}
                    </text>
                    <text class="ul6" style="color: #efad29">
                      {{ Number(item.serviceCharge).toFixed(2) }}
                    </text>
                  </view>
                </view>
              </scroll-view>
            </view>
          </view>
        </uni-popup>
        <uni-popup
          ref="popupPriceRemarks"
          type="bottom"
          :mask-click="true"
          background-color="#f4f4f4"
        >
          <view class="chargeDetailsStyle">
            <view class="title">价格说明</view>
            <view>
              <view class="list-item" style="background-color: #f0f0f0">
                <view style="width: 70%; padding: 5px">
                  <text style="font-weight: bold">站点价</text>
                </view>
                <view style="width: 30%; padding: 5px">
                  <text style="color: coral; font-weight: bold"
                    >￥{{ chargeData.f1 }}/度</text
                  >
                </view>
              </view>
              <view class="list-item" style="background-color: #f0f0f0">
                <view style="width: 25%; padding: 1px">
                  <text style="font-weight: bold">站点价</text>
                </view>
                <view style="width: 70%; padding: 1px">
                  <text
                    >为本充电站在充电平台制定的常规门市价格可能与充电站其他渠道展示的价格不一致，此价格仅供用户参考，使用充电平台的价格以扫码后费用确认页展示充电费用为准</text
                  >
                </view>
              </view>
              <view class="list-item" style="background-color: #f0f0f0">
                <view style="width: 25%; padding: 1px">
                  <text style="font-weight: bold">电费</text>
                </view>
                <view style="width: 70%; padding: 1px">
                  <text
                    >根据电价政策、场站用电类型及充电峰平谷时段而调整，为电网收取</text
                  >
                </view>
              </view>
              <view class="list-item" style="background-color: #f0f0f0">
                <view style="width: 25%; padding: 1px">
                  <text style="font-weight: bold">服务费</text>
                </view>
                <view style="width: 70%; padding: 1px">
                  <text>包含了站点运营费、设备维护费、人员费用等</text>
                </view>
              </view>
              <view class="list-item" style="background-color: #f0f0f0">
                <view style="width: 25%; padding: 1px">
                  <text style="font-weight: bold">跨时段计费</text>
                </view>
                <view style="width: 70%; padding: 1px">
                  <text
                    >跨不同时段充的电量，订单自动按分时段的价格计算，无需手动操作</text
                  >
                </view>
              </view>
            </view>
          </view>
        </uni-popup>
        <!-- 会员弹窗 -->

        <uni-popup
          ref="vipPopup"
          type="bottom"
          :mask-click="true"
          background-color="#f4f4f4"
        >
          <view
            style="
              background-color: #f4f4f4;
              display: flex;
              flex-direction: column;
              align-items: center;
              height: 600rpx;
              padding: 30rpx;
            "
          >
            <view
              class="title"
              style="font-size: 20px; font-weight: bold; margin-top: 30px"
              >确认开通会员</view
            >
            <view class="desc" style="font-size: 16px; margin-top: 40rpx">
              开通会员仅需
              <text style="color: #ff710b; font-weight: bold">6.9元</text
              >，是否确认开通？
            </view>
            <view
              class="actions"
              style="
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                align-items: center;
                width: 100%;
                margin-top: 100rpx;
              "
            >
              <button
                class="btn-confirm"
                style="
                  width: 40%;
                  height: 80rpx;
                  line-height: 80rpx;
                  background-color: #ff710b !important;
                  color: #fff;
                  border-radius: 40rpx;
                  border: none;
                "
                @click="confirmVip"
              >
                确认开通
              </button>
              <button
                class="btn-cancel"
                style="
                  width: 40%;
                  height: 80rpx;
                  line-height: 80rpx;
                  background-color: #fff;
                  color: #333;
                  border-radius: 40rpx;
                  border: 1px solid #333;
                "
                @click="closeVipPopup"
              >
                取消
              </button>
            </view>
          </view>
        </uni-popup>
      </view>
    </view>
    <tabbar :isPages="0"></tabbar>
  </view>
</template>

<script>
export default {
  data() {
    return {
      scrollTop: 0,
      scrollHeight: 0,
      isVip: false,
      chargeData: {
        lable: { content: "" }, // 确保 lable 被初始化
        // 其他属性...
      },
      deviceData: [],
      newTimes: {
        startTime: "",
        endTime: "",
      },
      distance: "",
      currentIndex: 0,
      historicalTasksDict: [
        {
          title: "超充",
          key: 1,
          num: 6,
        },
        {
          title: "快充",
          key: 2,
          num: 4,
        },
      ],
      chargePriceList1: [
        {
          times: "00:00~01:00",
          addPrice: 2.0,
          price: 1.37,
          vipPrice: 1.27,
        },
        {
          times: "00:00~01:00",
          addPrice: 2.0,
          price: "1.37",
          vipPrice: "1.27",
        },
        {
          times: "00:00~01:00",
          addPrice: 2.0,
          price: "1.37",
          vipPrice: "1.27",
        },
      ],
      chargeInfoList: [
        {
          static: 0,
          code: "111",
          kw: 10.2,
        },
        {
          static: 1,
          code: "222",
          kw: 120.0,
        },
      ],
      showVipPopup: false,
      carInfo: [],
    };
  },
  computed: {
    // hasProvice() {
    // 	const pages = getCurrentPages();
    // 	let flag = true;
    // 	if (pages.length == 1) {
    // 		flag = false;
    // 		this.topIconName = 'home';
    // 	}
    // 	return flag;
    // }
  },
  onLoad(options) {
    this.getDetails(1);
    this.getCarInfo();
    this.isVip();
  },
  onReachBottom() {
    // 处理底部触发事件
  },
  methods: {
    goToVip() {
      // this.showVipPopup = true;
      this.openVip();
    },
    openVip() {
      this.$refs.vipPopup.open();
    },
    // 是否开通会员
    async isVip() {
      const res = await this.$request("user/info", {
        uid: uni.getStorageSync("uid"),
      });
      if (res.result == 0) {
        this.isVip = res.data.isVip;
      }
    },
    async confirmVip() {
      this.$refs.vipPopup.close();
      const res = await this.$request("user/pay-month-card", {
        uid: uni.getStorageSync("uid"),
        type: "1",
        price: 6.9,
        month: 1,
      });
      if (res.result == 0) {
        this.$util.msg("开通会员成功");
      } else {
        this.$util.msg(res.resultNote);
      }

      //   this.$util && this.$util.msg
      //     ? this.$util.msg("开通会员功能开发中~")
      //     : uni.showToast({ title: "开通会员功能开发中~", icon: "none" });
    },
    closeVipPopup() {
      this.$refs.vipPopup.close();
    },

    //通过弹窗显隐控制导航栏的显示和隐藏
    popupChange(e) {
      if (e.show) {
        //隐藏tabbar
        uni.hideTabBar();
      } else {
        //显示tabbar
        uni.showTabBar();
      }
      state.searchIcon = e.show;
    },
    emptyEvent() {},
    changeCategory(index) {
      this.currentIndex = index;
    },
    openChargeDetails(row) {
      if (this.$refs.popupRef && this.$refs.popupRef.open) {
        this.$refs.popupRef.open("bottom");
      } else {
        uni.showToast({
          title: "弹窗组件未准备好",
          icon: "none",
        });
      }
    },
    addCar() {
      console.log("遮罩层被点击");
    },
    handleMaskClick() {
      console.log("遮罩层被点击");
    },
    closePopup() {
      this.$refs.popupRef.close();
    },
    openAllTimes() {
      if (this.$refs.popupAllTimes && this.$refs.popupAllTimes.open) {
        this.$refs.popupAllTimes.open("bottom");
      } else {
        uni.showToast({
          title: "弹窗组件未准备好",
          icon: "none",
        });
      }
    },
    opnePriceRemarks() {
      if (this.$refs.popupPriceRemarks && this.$refs.popupPriceRemarks.open) {
        this.$refs.popupPriceRemarks.open("bottom");
      } else {
        uni.showToast({
          title: "弹窗组件未准备好",
          icon: "none",
        });
      }
    },
    // 获取爱车信息
    async getCarInfo() {
      const data = {
        uid: uni.getStorageSync("uid"),
        pageNo: "1",
        pageSize: "1",
      };

      const res = await this.$request("user/my-car-list", data, {
        showLoading: true,
      });
      if (res.result == 0) {
        this.carInfo = res.data;
      } else {
        this.$util.msg(res.resultNote);
      }
    },

    async getDetails(row) {
      const data = {
        uid: 1,
        stationId: row,
        pageNo: this.pageNo,
        pageSize: "10",
        type: this.isActive == 0 ? "" : this.isActive - 1,
      };
      const res = await this.$request("recharge/detail", data, {
        showLoading: true,
      });
      if (res.result == 0) {
        this.chargeData = res.data1;
        this.deviceData = res.data.list;

        // 确保 chargeData.lable 是一个对象
        if (!this.chargeData.lable) {
          this.chargeData.lable = { content: "" }; // 或者设置为一个默认值
        }

        this.historicalTasksDict[0].num = this.chargeData.canUse;
        this.historicalTasksDict[1].num = this.chargeData.canUseSlowly;

        let that = this;
        if (Array.isArray(this.chargeData.atRechargeStationPriceList)) {
          this.chargeData.atRechargeStationPriceList.forEach(function (value) {
            // 确保 value.startTime 和 value.endTime 是有效的
            if (value.startTime && value.endTime) {
              const timeString = new Date().toTimeString().substr(0, 8);
              if (
                timeString >= value.startTime &&
                timeString <= value.endTime
              ) {
                that.newTimes = value;
              }
            }
          });
        } else {
          console.warn(
            "atRechargeStationPriceList is not an array or is undefined"
          );
        }
        this.$set(this.chargeData, "newProperty", value);
      }
    },

  },
};
</script>

<style scoped lang="scss">
// 颜色变量
$primary-color: #ff7023; // 主色调
$secondary-color: #6941f8; // 副色调
$success-color: #19caa3; // 成功/空闲状态
$warning-color: #ff5500; // 警告/占用状态
$text-color: #333; // 主要文字
$text-light: #a3a3a3; // 次要文字
$border-color: #eee; // 边框颜色
$bg-light: #f0f0f0; // 浅色背景
$bg-highlight: rgba(255, 111, 8, 0.1); // 高亮背景
.content {
  padding: 30rpx;
  padding-bottom: 100rpx; /* 避免内容被底栏遮挡 */
}
.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100rpx;
  background: #fff;
  border-top: 1rpx solid #eee;
  padding: 10px;
  display: flex;
  align-items: center;
  .front {
    .font {
      color: #ff6f08;
    }
  }
  .after {
    .custom-btn {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100px;
      height: 35px;
      font-weight: bold;
      color: rgba(255, 255, 255, 1);
      background-color: #ff7023;
      border-color: #ff7023;
      border-radius: 35px;
    }
    margin-left: auto;
    color: #a3a3a3;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
.swiper {
  height: 300rpx; /* 设置轮播图高度 */
}
.image {
  width: 100%;
  height: 100%;
}
.card {
  background-color: #ffffff; /* 卡片背景色 */
  border-radius: 10px;
  padding: 15px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  margin-bottom: 15px;
}
.card-title {
  font-size: 22px; /* 标题字体大小 */
  font-weight: 600; /* 粗体 */
  color: #6941f8; /* 字体颜色 */
}
.notes {
  font-size: 26rpx; /* 字体大小 */
  color: #2c2c2c;
  margin-top: 12rpx;
  margin-bottom: 12rpx;
}
.open-time {
  display: inline-block;
  font-size: 14px;
  border: 1px solid #b1a8a8;
  border-radius: 10rpx;
  padding: 10rpx 20rpx;
  margin-top: 7px;
  color: #2c2c2c;
  text-align: center;
  letter-spacing: 2rpx;
}
.address {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}
.address-info {
  width: 80%;
}
.address-text {
  font-size: 14px; /* 地址字体大小 */
}
.distance-text {
  font-size: 12px; /* 距离字体大小 */
  color: #a3a3a3; /* 次要文字颜色 */
}
.icon-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.icon {
  width: 25px;
  height: 25px;
}
.distance-km {
  font-size: 10px; /* 距离单位字体大小 */
}
.statistics {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-bottom: 30rpx;
  .chong {
    width: 50rpx;
    height: 50rpx;
    margin-right: 10rpx;
  }
  .super {
    display: flex;
    justify-content: center;
    align-items: center;
    // border: 1rpx solid #a3a3a3;
    margin-left: 5%;
    width: 130px;
    height: 40px;
    background-color: rgba(105, 65, 248, 0.438);
    border-radius: 15rpx;
    .front {
      display: flex;
      justify-content: center;
      background-color: #6941f8;
      color: #ffffff;
      width: 36px;
      height: 23px;
      line-height: 22px;
      border: 1rpx solid #6941f8;
      border-radius: 10rpx;
      margin-right: 10px;
    }
    .centre {
      color: #000000;
      font-weight: bold;
    }
    .after {
      color: #242323;
      font-weight: bold;
    }
  }
  .fast {
    display: flex;
    justify-content: center;
    align-items: center;
    // border: 1rpx solid #a3a3a3;
    width: 130px;
    background-color: rgba(255, 111, 8, 0.452);
    border-radius: 15rpx;
    margin-right: 5%;
    .front {
      display: flex;
      justify-content: center;
      background-color: #ff6f08;
      color: #ffffff;
      width: 36px;
      height: 23px;
      line-height: 22px;
      border: 1rpx solid #ff6f08;
      border-radius: 10rpx;
      margin-right: 10px;
    }
    .centre {
      color: #000;
      font-weight: bold;
    }
    .after {
      color: #242323;
      font-weight: bold;
    }
  }
}
.charge-price {
  display: flex;
  justify-content: space-between; /* 使内容均匀分布 */
  align-items: center;
  font-size: 26px; /* 字体放大 */
  font-weight: bold; /* 加粗 */
  padding-bottom: 20rpx;
  margin-bottom: 20rpx;
  border-bottom: 1rpx solid #b1a8a8;
  .cdf {
    font-size: 38rpx;
  }
  .jiage {
    color: #999;
    display: flex;
    align-items: center;
    image {
      width: 40rpx;
      height: 40rpx;
      margin-left: 10rpx;
    }
  }
  .jiagesm {
  }
}
.list-item {
  display: flex;
  justify-content: space-between; /* 使内容均匀分布 */
  align-items: center;
  padding: 10px; /* 增加内边距 */
  border-radius: 8px; /* 圆角 */
  margin-top: 5px; /* 增加间距 */
  background-color: #f0f8ff; /* 使用更柔和的背景色 */
  font-size: 16px; /* 确保字体大小一致 */
}
.guanggao {
  width: 100%;
  height: 200rpx;
  margin-bottom: 30rpx;
  border-radius: 10px;
  image {
    border-radius: 10px;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
.ul1,
.ul2,
.ul4,
.ul6 {
  font-size: 26rpx; /* 字体大小 */
  color: #333; /* 字体颜色 */
}
.chontime {
  font-size: 26rpx;
  color: #999;
  width: 33%;
  text-align: left;
  color: #000;
}
.left-label-font {
  font-size: 26rpx;
  font-weight: bold;
  width: 34%;
  text-align: center;
}
.ul3,
.ul5 {
  font-size: 26rpx; /* 字体大小 */
  color: #999; /* 次要文字颜色 */
}
.right-label-font {
  font-size: 26rpx;
  font-weight: bold;
  text-align: center;
  color: #cc7431;
  width: 34%;
}
.list-item-info {
  background-color: #fff;
  padding: 20rpx;
  margin: 10rpx 0;
  border-radius: 12rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
  display: flex;
  justify-content: space-between;
  align-items: center;
  .image {
    margin-left: 5px;
    width: 15px;
    height: 15px;
  }
  .gun-info {
    width: 60%;
    text-align: left;
    // display: flex;
    // flex-direction: column;
    // justify-content: space-between;
    // align-items: center;
    // width: 100%;
  }
  .stop {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 90rpx;
    height: 90rpx;
    margin-left: 40rpx;
    border: 10rpx solid #19caa3;
    border-radius: 50px;
    color: #19caa3;
  }
  .use {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 40rpx;
    width: 90rpx;
    height: 90rpx;
    border: 10rpx solid #ff5500;
    border-radius: 50px;
    color: #ff5500;
  }
}

.popupBottom {
  height: 650rpx;
  overflow: hidden;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 10rpx 20rpx;
  border-radius: 20rpx 20rpx 0 0;
  background-color: #fff;
}
.chargeDetailsStyle {
  padding: 40rpx;
  min-height: 600rpx;
  max-height: 900rpx;
  margin-bottom: 200rpx;
  .title {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    font-weight: bold;
  }
  .scroll-Y {
    height: 600rpx;
  }
  .scroll-view-item {
    background-color: #ffff00;
    height: 300rpx;
    line-height: 300rpx;
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin-left: 10px;
    margin-top: 10px;
  }
}
.service-facilities {
  padding-top: 10px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  height: 70px;
  .ul {
    height: 30px;
    width: 14%;
    .image {
      display: flex;
      flex-direction: row;
      justify-content: center;
    }
    .title {
      font-size: 12px;
      display: flex;
      flex-direction: row;
      justify-content: center;
    }
  }
}
.scroll {
  display: flex;
  justify-content: space-around;
  width: 100%;
  height: 50px;
  border-bottom: 1px solid #ccc;
}
.scroll .nav-item .active {
  color: #ff7526;
}
.scroll .nav-item .active1 {
  display: flex;
  justify-content: center;
  background-color: #ff7526;
  width: 25px;
  font-size: 15px;
  border-radius: 10px;
}
.parking-info {
  margin-top: 10px;
}
.view-more {
  text-align: right; /* 右对齐 */
  color: #ff7023; /* 颜色 */
  font-weight: bold; /* 加粗 */
  cursor: pointer; /* 鼠标悬停时显示为手型 */
  margin-top: 10px; /* 增加间距 */
}

@mixin height {
  /* #ifndef APP-NVUE */
  height: 100%;
  /* #endif */
  /* #ifdef APP-NVUE */
  flex: 1;
  /* #endif */
}
</style>
